<h6 class="card-header">
    <span ng-bind="$ctrl.header"></span>    
</h6>
<form ng-class="{'submitted': submitted}">
<table class="table table-sm" id="Table">
    <thead class="thead-light">
        <tr>
            <th scope="col" width="5%">
                <span class="oi oi-move"></span>
            </th>
            <th scope="col">Title</th>
            <th scope="col">Value</th>
        </tr>
    </thead>
    <tbody class="sortable">
        <tr class="sortable-item module-column" 
            ng-repeat="attribute in $ctrl.attributes | orderBy:'priority' track by $index" 
            ng-class="{'selected': $ctrl.selectedProp === attribute}">
            <td style="cursor:grab;">
                <span class="oi oi-move"></span>
            </td>
            <td>
                <span ng-bind="attribute.title"></span>
            </td>
            <td class="prop-value-container">                
                <attribute-value-editor attribute-value="$ctrl.filterData(attribute.name)"></attribute-value-editor>                
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>
                <button ng-click="$ctrl.submit()" class="btn btn-primary">Save</button>
            </td>
        </tr>
    </tfoot>
</table>
</form>